<template>
  <div >
    <div class="exit" @click="close()">❎</div>
    <div ref="captcha" id="captcha"></div>
    <div id="msg"></div>
  </div>
</template>
<script>
  import "./index.js"; 
  export default {
  
    name: "verified",
    props:{
        visible:{
            type:Boolean,
            value:false
        }
    },
    data() {
      return {
         captcha:null,
      };
    },
    mounted() {
      this.getCaptcha();
    },
    methods: {
      getCaptcha() {
       this.captcha=jigsaw.init({
          el: this.$refs.captcha,
          onSuccess:()=>this.$emit("successHandle"),
          onFail: function() {
            console.log("成功")
          },
          onRefresh: function() {
            console.log("成功")
          },
        });
      },
      close(){
       this.captcha.reset();
       this.$emit("close");
        // console.log(1111, this.captcha);
      }

    }
  }
</script>

<style>
  @import "./index.css";
  .exit{
    position:absolute;
    width:15px;
    height:15px;
    border-radius:50%;
    /* background:rgba(0,0,0,.5); */
    left:-8px;
    top:-10px;
    z-index: 2;
    cursor:pointer;
  }
</style>
